<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript数组操作全面指南</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        
        header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .sidebar {
            width: 280px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-right: 25px;
            position: sticky;
            align-self: flex-start;
            top: 20px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .sidebar h2 {
            color: #6a11cb;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 15px;
        }
        
        .sidebar ul {
            list-style: none;
        }
        
        .sidebar li {
            margin-bottom: 10px;
        }
        
        .sidebar a {
            text-decoration: none;
            color: #555;
            display: block;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .sidebar a:hover {
            background-color: #f0f4ff;
            color: #6a11cb;
        }
        
        .sidebar a.active {
            background-color: #6a11cb;
            color: white;
        }
        
        .main-content {
            flex: 1;
        }
        
        .section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .section h2 {
            color: #6a11cb;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .section h3 {
            color: #2575fc;
            margin: 25px 0 15px;
        }
        
        .card {
            background: #f9fafc;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 4px solid #6a11cb;
        }
        
        .code-example {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: 'Fira Code', monospace;
        }
        
        .method-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .method-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            border-top: 4px solid #2575fc;
            transition: transform 0.3s ease;
        }
        
        .method-card:hover {
            transform: translateY(-5px);
        }
        
        .method-card h4 {
            color: #2575fc;
            margin-bottom: 12px;
            font-size: 1.2rem;
        }
        
        .method-card p {
            color: #666;
            font-size: 0.95rem;
        }
        
        .example-container {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        .example-code, .example-output {
            flex: 1;
            background: #2d2d2d;
            border-radius: 8px;
            padding: 15px;
            color: white;
        }
        
        .example-output {
            background: #f8f9fa;
            color: #333;
            font-family: 'Fira Code', monospace;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            color: #777;
            border-top: 1px solid #eee;
        }
        
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                position: relative;
                margin-bottom: 20px;
                max-height: none;
            }
            
            .method-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .keyword {
            color: #ff79c6;
        }
        
        .function {
            color: #50fa7b;
        }
        
        .comment {
            color: #6272a4;
        }
        
        .string {
            color: #f1fa8c;
        }
        
        .number {
            color: #bd93f9;
        }
    </style>
</head>
<body>
    <header>
        <h1>JavaScript数组操作全面指南</h1>
        <p>详细总结JavaScript中数组的定义和操作方法，包含所有常用函数和示例</p>
    </header>
    
    <div class="container">
        <aside class="sidebar">
            <h2>目录</h2>
            <ul>
                <li><a href="#defining-arrays" class="active">定义数组</a></li>
                <li><a href="#basic-operations">基本操作</a></li>
                <li><a href="#iteration-methods">迭代方法</a></li>
                <li><a href="#transformation-methods">转换方法</a></li>
                <li><a href="#search-sort-methods">搜索和排序方法</a></li>
                <li><a href="#other-methods">其他方法</a></li>
                <li><a href="#es6-features">ES6+ 特性</a></li>
            </ul>
        </aside>
        
        <main class="main-content">
            <section id="defining-arrays" class="section">
                <h2>定义数组</h2>
                
                <div class="card">
                    <h3>数组字面量表示法</h3>
                    <p>最简单和最常见的数组定义方式</p>
                    <div class="code-example">
                        <pre><code><span class="keyword">const</span> fruits = [<span class="string">'Apple'</span>, <span class="string">'Banana'</span>, <span class="string">'Orange'</span>];
<span class="keyword">const</span> numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];
<span class="keyword">const</span> mixed = [<span class="string">'Hello'</span>, <span class="number">42</span>, <span class="keyword">true</span>, <span class="keyword">null</span>];</code></pre>
                    </div>
                </div>
                
                <div class="card">
                    <h3>Array构造函数</h3>
                    <p>使用new关键字创建数组</p>
                    <div class="code-example">
                        <pre><code><span class="keyword">const</span> arr1 = <span class="keyword">new</span> Array(); <span class="comment">// 创建空数组</span>
<span class="keyword">const</span> arr2 = <span class="keyword">new</span> Array(<span class="number">5</span>); <span class="comment">// 创建长度为5的数组</span>
<span class="keyword">const</span> arr3 = <span class="keyword">new</span> Array(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// 创建包含元素的数组</span></code></pre>
                    </div>
                </div>
                
                <div class="card">
                    <h3>Array.of() 方法</h3>
                    <p>ES6引入的方法，解决Array构造函数参数歧义问题</p>
                    <div class="code-example">
                        <pre><code><span class="keyword">const</span> arr1 = Array.of(<span class="number">5</span>); <span class="comment">// [5]</span>
<span class="keyword">const</span> arr2 = Array.of(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// [1, 2, 3]</span></code></pre>
                    </div>
                </div>
                
                <div class="card">
                    <h3>Array.from() 方法</h3>
                    <p>从类数组对象或可迭代对象创建新数组</p>
                    <div class="code-example">
                        <pre><code><span class="keyword">const</span> str = <span class="string">'hello'</span>;
<span class="keyword">const</span> arr = Array.from(str); <span class="comment">// ['h', 'e', 'l', 'l', 'o']</span>

<span class="keyword">const</span> set = <span class="keyword">new</span> Set([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]);
<span class="keyword">const</span> arrFromSet = Array.from(set); <span class="comment">// [1, 2, 3]</span></code></pre>
                    </div>
                </div>
            </section>
            
            <section id="basic-operations" class="section">
                <h2>基本数组操作</h2>
                
                <div class="method-grid">
                    <div class="method-card">
                        <h4>push()</h4>
                        <p>在数组末尾添加一个或多个元素，返回新长度</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>];
arr.push(<span class="number">3</span>); <span class="comment">// 返回3，arr变为[1, 2, 3]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>pop()</h4>
                        <p>删除数组的最后一个元素，返回被删除的元素</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
arr.pop(); <span class="comment">// 返回3，arr变为[1, 2]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>shift()</h4>
                        <p>删除数组的第一个元素，返回被删除的元素</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
arr.shift(); <span class="comment">// 返回1，arr变为[2, 3]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>unshift()</h4>
                        <p>在数组开头添加一个或多个元素，返回新长度</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">2</span>, <span class="number">3</span>];
arr.unshift(<span class="number">1</span>); <span class="comment">// 返回3，arr变为[1, 2, 3]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>length</h4>
                        <p>获取或设置数组的长度</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
console.log(arr.length); <span class="comment">// 3</span>
arr.length = <span class="number">2</span>; <span class="comment">// arr变为[1, 2]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>concat()</h4>
                        <p>合并两个或多个数组，返回新数组</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>];
<span class="keyword">const</span> arr2 = [<span class="number">3</span>, <span class="number">4</span>];
<span class="keyword">const</span> arr3 = arr1.concat(arr2); <span class="comment">// [1, 2, 3, 4]</span></code></pre>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="iteration-methods" class="section">
                <h2>数组迭代方法</h2>
                
                <div class="method-grid">
                    <div class="method-card">
                        <h4>forEach()</h4>
                        <p>对数组的每个元素执行一次提供的函数</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].forEach(<span class="function"><span class="keyword">function</span>(<span class="params">item</span>) </span>{
  console.log(item);
});</code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>map()</h4>
                        <p>创建一个新数组，其结果是该数组中的每个元素调用提供的函数后的返回值</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> doubled = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].map(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x * <span class="number">2</span>;
}); <span class="comment">// [2, 4, 6]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>filter()</h4>
                        <p>创建一个新数组，包含通过所提供函数测试的所有元素</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> evens = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>].filter(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x % <span class="number">2</span> === <span class="number">0</span>;
}); <span class="comment">// [2, 4]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>reduce()</h4>
                        <p>对数组中的每个元素执行一个reducer函数，将其结果汇总为单个返回值</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> sum = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>].reduce(<span class="function"><span class="keyword">function</span>(<span class="params">acc, curr</span>) </span>{
  <span class="keyword">return</span> acc + curr;
}, <span class="number">0</span>); <span class="comment">// 10</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>some()</h4>
                        <p>测试数组中是不是至少有1个元素通过了被提供的函数测试</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> hasEven = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">8</span>].some(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x % <span class="number">2</span> === <span class="number">0</span>;
}); <span class="comment">// true</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>every()</h4>
                        <p>测试一个数组内的所有元素是否都能通过某个指定函数的测试</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> allEven = [<span class="number">2</span>, <span class="number">4</span>, <span class="number">6</span>].every(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x % <span class="number">2</span> === <span class="number">0</span>;
}); <span class="comment">// true</span></code></pre>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="transformation-methods" class="section">
                <h2>数组转换方法</h2>
                
                <div class="method-grid">
                    <div class="method-card">
                        <h4>join()</h4>
                        <p>将数组的所有元素连接成一个字符串并返回</p>
                        <div class="code-example">
                            <pre><code>[<span class="string">'Fire'</span>, <span class="string">'Air'</span>, <span class="string">'Water'</span>].join(); <span class="comment">// "Fire,Air,Water"</span>
[<span class="string">'Fire'</span>, <span class="string">'Air'</span>, <span class="string">'Water'</span>].join(<span class="string">''</span>); <span class="comment">// "FireAirWater"</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>toString()</h4>
                        <p>返回一个字符串，表示指定的数组及其元素</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="string">'a'</span>].toString(); <span class="comment">// "1,2,a"</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>slice()</h4>
                        <p>返回一个新的数组对象，包含从start到end（不包括end）的浅拷贝</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];
arr.slice(<span class="number">1</span>, <span class="number">3</span>); <span class="comment">// [2, 3]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>splice()</h4>
                        <p>通过删除或替换现有元素或者添加新元素来修改数组</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];
arr.splice(<span class="number">2</span>, <span class="number">1</span>, <span class="number">6</span>); <span class="comment">// 返回[3]，arr变为[1, 2, 6, 4, 5]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>flat()</h4>
                        <p>按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>]].flat(); <span class="comment">// [1, 2, 3, 4]</span>
[<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>]]].flat(<span class="number">2</span>); <span class="comment">// [1, 2, 3, 4, 5, 6]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>flatMap()</h4>
                        <p>首先使用映射函数映射每个元素，然后将结果压缩成一个新数组</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].flatMap(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> [x, x * <span class="number">2</span>];
}); <span class="comment">// [1, 2, 2, 4, 3, 6]</span></code></pre>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="search-sort-methods" class="section">
                <h2>搜索和排序方法</h2>
                
                <div class="method-grid">
                    <div class="method-card">
                        <h4>indexOf()</h4>
                        <p>返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">2</span>, <span class="number">9</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>].indexOf(<span class="number">9</span>); <span class="comment">// 1</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>lastIndexOf()</h4>
                        <p>返回指定元素在数组中的最后一个的索引，如果不存在则返回-1</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">2</span>, <span class="number">9</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>].lastIndexOf(<span class="number">9</span>); <span class="comment">// 4</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>find()</h4>
                        <p>返回数组中满足提供的测试函数的第一个元素的值</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>].find(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x > <span class="number">10</span>;
}); <span class="comment">// 12</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>findIndex()</h4>
                        <p>返回数组中满足提供的测试函数的第一个元素的索引</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">5</span>, <span class="number">12</span>, <span class="number">8</span>, <span class="number">130</span>, <span class="number">44</span>].findIndex(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>{
  <span class="keyword">return</span> x > <span class="number">10</span>;
}); <span class="comment">// 1</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>includes()</h4>
                        <p>判断一个数组是否包含一个指定的值，返回true或false</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">2</span>); <span class="comment">// true</span>
[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].includes(<span class="number">4</span>); <span class="comment">// false</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>sort()</h4>
                        <p>对数组的元素进行排序，并返回数组</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">3</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">2</span>].sort(); <span class="comment">// [1, 2, 3, 4]</span>
[<span class="number">40</span>, <span class="number">100</span>, <span class="number">1</span>, <span class="number">5</span>].sort(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>{
  <span class="keyword">return</span> a - b;
}); <span class="comment">// [1, 5, 40, 100]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>reverse()</h4>
                        <p>将数组中元素的位置颠倒，并返回该数组</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].reverse(); <span class="comment">// [3, 2, 1]</span></code></pre>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="other-methods" class="section">
                <h2>其他有用的数组方法</h2>
                
                <div class="method-grid">
                    <div class="method-card">
                        <h4>isArray()</h4>
                        <p>用于确定传递的值是否是一个Array</p>
                        <div class="code-example">
                            <pre><code>Array.isArray([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]); <span class="comment">// true</span>
Array.isArray({<span class="attr">foo</span>: <span class="number">123</span>}); <span class="comment">// false</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>fill()</h4>
                        <p>用一个固定值填充一个数组中从起始索引到终止索引内的全部元素</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>); <span class="comment">// [4, 4, 4]</span>
[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].fill(<span class="number">4</span>, <span class="number">1</span>); <span class="comment">// [1, 4, 4]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>copyWithin()</h4>
                        <p>浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度</p>
                        <div class="code-example">
                            <pre><code>[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>].copyWithin(<span class="number">0</span>, <span class="number">3</span>); <span class="comment">// [4, 5, 3, 4, 5]</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>entries()</h4>
                        <p>返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> iterator = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>].entries();
console.log(iterator.next().value); <span class="comment">// [0, 'a']</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>keys()</h4>
                        <p>返回一个包含数组中每个索引键的Array Iterator对象</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> iterator = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>].keys();
console.log(iterator.next().value); <span class="comment">// 0</span></code></pre>
                        </div>
                    </div>
                    
                    <div class="method-card">
                        <h4>values()</h4>
                        <p>返回一个新的Array Iterator对象，该对象包含数组每个索引的值</p>
                        <div class="code-example">
                            <pre><code><span class="keyword">const</span> iterator = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>].values();
console.log(iterator.next().value); <span class="comment">// 'a'</span></code></pre>
                        </div>
                    </div>
                </div>
            </section>
            
            <section id="es6-features" class="section">
                <h2>ES6+ 数组特性</h2>
                
                <div class="card">
                    <h3>扩展运算符</h3>
                    <p>扩展运算符（...）允许在需要多个元素/变量/参数的地方扩展数组</p>
                    <div class="code-example">
                        <pre><code><span class="comment">// 数组拷贝</span>
<span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
<span class="keyword">const</span> arrCopy = [...arr]; <span class="comment">// [1, 2, 3]</span>

<span class="comment">// 数组合并</span>
<span class="keyword">const</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>];
<span class="keyword">const</span> arr2 = [<span class="number">3</span>, <span class="number">4</span>];
<span class="keyword">const</span> merged = [...arr1, ...arr2]; <span class="comment">// [1, 2, 3, 4]</span>

<span class="comment">// 函数参数</span>
<span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">a, b, c</span>) </span>{
  <span class="keyword">return</span> a + b + c;
}
<span class="keyword">const</span> numbers = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
sum(...numbers); <span class="comment">// 6</span></code></pre>
                    </div>
                </div>
                
                <div class="card">
                    <h3>解构赋值</h3>
                    <p>从数组提取值，按照对应位置对变量赋值</p>
                    <div class="code-example">
                        <pre><code><span class="comment">// 基本解构</span>
<span class="keyword">const</span> [a, b] = [<span class="number">1</span>, <span class="number">2</span>];
console.log(a); <span class="comment">// 1</span>
console.log(b); <span class="comment">// 2</span>

<span class="comment">// 跳过元素</span>
<span class="keyword">const</span> [c, , d] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
console.log(c); <span class="comment">// 1</span>
console.log(d); <span class="comment">// 3</span>

<span class="comment">// 默认值</span>
<span class="keyword">const</span> [e = <span class="number">5</span>, f = <span class="number">7</span>] = [<span class="number">1</span>];
console.log(e); <span class="comment">// 1</span>
console.log(f); <span class="comment">// 7</span>

<span class="comment">// 剩余模式</span>
<span class="keyword">const</span> [g, ...h] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];
console.log(g); <span class="comment">// 1</span>
console.log(h); <span class="comment">// [2, 3]</span></code></pre>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <footer>
        <p>JavaScript数组操作指南 &copy; 2023 | 使用HTML、CSS和JavaScript创建</p>
    </footer>

    <script>
        // 平滑滚动
        document.querySelectorAll('.sidebar a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                window.scrollTo({
                    top: targetElement.offsetTop - 20,
                    behavior: 'smooth'
                });
                
                // 更新活动链接
                document.querySelectorAll('.sidebar a').forEach(a => {
                    a.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 滚动时更新活动链接
        window.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('.section');
            let currentSection = '';
            
            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (pageYOffset >= sectionTop - 100) {
                    currentSection = section.getAttribute('id');
                }
            });
            
            document.querySelectorAll('.sidebar a').forEach(a => {
                a.classList.remove('active');
                if (a.getAttribute('href') === '#' + currentSection) {
                    a.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>